<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* dev */
        body {
            background-color: skyblue;
        }

        .box {
            width: 1000px;
            height: 240px;
            margin: 0 auto;
            margin-top: 100px;
            clear: both;
        }

        #btn {
            width: 100px;
            height: 30px;
            margin-left: 600px;
            margin-top: 50px;
        }

        .name {
            width: 100px;
            height: 30px;
            float: left;
            background-color: antiquewhite;
            margin-left: 10px;
            margin-top: 10px;
            text-align: center;
            line-height: 30px;
        }

        #span {
            float: right;
            position: relative;
            top: 55px;
            right: 185px;
        }

        h1 {
            text-align: center;
        }
    </style>

</head>

<body>
<<<<<<< HEAD
    <h1>随机点名系统</h1>
    <span id="span"></span>
    <div class="box" id="box"></div>
    <input type="button" id="btn" value="点名" />
    <script type="text/javascript">
        //创造虚拟后台数据

        var arrs = ["宋文博", "张瑞凯", "刘翔宇", "王栋", "杨晓静", "赵航", "李振华", "杨欠欠",
            "王龙", "崔海亮", "刘琦", "步晨昭", "武志斌", "李海涛", "黄国仪", "李帅楠", "汪前", "李林桀", "褚耿琳", "宋全能", "李江涛", "徐诗航", "王毅",
            "柴肖童", "张铖铖", "杜亚鹏", "周国伟", "周军全", "郝春玲", "朱海燕", "富丽君", "焦红雨", "王凯", "金一铭", "刘帅", "宋威", "韩朝阳", "冯星帅"
        ];
        //获取父元素
        var boxNode = document.getElementById("box");
        for (var i = 0; i < arrs.length; i++) {
            //创建新元素
            var divNode = document.createElement("div");
            divNode.innerHTML = arrs[i];
            divNode.className = "name";
            boxNode.appendChild(divNode);
        }
        //点名
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            if (this.value === "点名") {
                //定时
                timeId = setInterval(function () {
                    //清空所有颜色
                    for (var j = 0; j < arrs.length; j++) {
                        boxNode.children[j].style.background = "";
                    }
                    //留下当前颜色
                    var random = parseInt(Math.random() * arrs.length);
                    boxNode.children[random].style.background = "red";
                }, 100);
                this.value = "停止";
            } else {
                //清除计时器
                clearInterval(timeId);
                this.value = "点名";
            }
        }
        var spanNode = document.getElementById("span");
        //调用时间
        getTime();
        setInterval(getTime, 1000);

        function getTime() {
            var day = new Date();
            var year = day.getFullYear();
            var month = day.getMonth() + 1;
            var dat = day.getDay();
            var hours = day.getHours();
            var minitues = day.getMinutes();
            var second = day.getSeconds();
            spanNode.innerHTML = year + "-" + month + "-" + dat + " " + hours + ":" + minitues + ":" + second;
        }
    </script>
=======
    <div>
        <p>你好啊，我叫赛丽亚，今天有是充满希望的一天</p>
        
    </div>
>>>>>>> chenPeng
</body>

</html>